<template>
  <a-popover placement="bottomRight" overlayClassName="m-model-select-popover">
    <template #content>
      <div class="modal-select">
      	<template v-for="(aItem, aIndex) in list">
      		<div v-if="aItem.show !== false" class="item" 
      			:class="{'cursor': aItem.value ? true : false}"
      			@click="aItem.value ? setModelType(aItem) : null">
	      		<div class="flex items-center">
	      			<img class="icon" :src="aItem.img"/>
		      		<div class="text-box">
		      			<div class="t1">{{aItem.label}}</div>
		      			<div class="t2">{{aItem.tip}}</div>
		      		</div>
		      		<template v-if="aItem.value">
		      			<img v-if="aItem.value != userStore.modelType" class="state" src="@/assets/image/icon-02_01.png"/>
		      			<img v-else class="state" src="@/assets/image/icon-02_02.png"/>
		      		</template>
	      		</div>
	      		<div v-if="aItem.children" class="children">
	      			<div v-for="(bItem, bIndex) in aItem.children" :key="bItem.value" class="c-item" 
	      				:class="{'cursor': bItem.value ? true : false}"
	      				@click.stop="setModelType(bItem)">
	      				<span>{{bItem.label}}</span>
	      				<template v-if="bItem.value">
			      			<img v-if="bItem.value != userStore.modelType" class="state" src="@/assets/image/icon-02_01.png"/>
			      			<img v-else class="state" src="@/assets/image/icon-02_02.png"/>
			      		</template>
	      			</div>
	      		</div>
	      	</div>
      	</template>
      </div>
    </template>
    <div class="m-model-select-btn">
			<div class="text">{{currentLabel}}</div>
			<DownOutlined class="icon"/>
		</div>
	</a-popover>
</template>

<script setup>
	import { reactive, ref, computed, onMounted, useAttrs } from 'vue'
	import { DownOutlined } from '@ant-design/icons-vue';
	import {ApiGet, ApiPost, ApiDownGet} from "@/api/request.js"
	import img01 from "@/assets/image/icon-01.png";
	import img03 from "@/assets/image/icon-03.png";
	import img04 from "@/assets/image/icon-04.png";
	import {useRouter, useRoute} from "vue-router";
	import {useUserStore} from '@/store/userStore';

	const attrs = useAttrs();

	const router = useRouter();
	const route = useRoute();
	const userStore = useUserStore();

	// 当前的label
	const currentLabel = computed(() => {
		let obj = getChoice();
		return obj ? (obj.labelName || obj.label) : '请选择';
	})

	const _d = reactive({
		// 千帆列表
		qianfanList: [], 
		// Stable国际版列表
		stableSd: [],
	})

	const list = computed(() => {
		return [
			{ label: 'AzureAI GPT 3.5', tip: '稳定而且持续的输出', value: 'GPT3.5', img: img01 },
			{ label: 'AzureAI GPT 4.0(VIP)', tip: 'VIP用户可以访问', value: 'GPT4.0', img: img01 },
			{ label: '百度千帆模型平台', tip: '十分优秀的国产LLM平台，多个模型提供选择', img: img03, children: _d.qianfanList },
			{ label: 'Stable-Diffusion-XL（百度）', tip: '敬请发挥您的创意', value: 'Stable-Diffusion-XL', img: img04, path: '/stableDiffusionXl' },
			{ label: 'Stable-Diffusion-XL（国际版）', tip: '敬请发挥您的创意', value: 'Stable-Diffusion-XL-sd', img: img04, path: '/stableDiffusionXlSd' },
			{ show: attrs.showAudioAnalysis ? true : false, label: '音频文件分析', tip: '上传音频文件，提取语言内容以文字形式输出', value: '音频文件分析', notType: true, img: img01, click: () => {
				attrs.showAudioAnalysis();
			} },
			{ label: '音频文件生成', tip: '根据语速，语调，场景，输入文字生成音频文件', value: '音频文件生成', notType: true, img: img01, path: '/textTovoice', target: '_blank' },
		]
	})

	onMounted(() => {
		// 获取千帆模型列表
		getPianfanModals();
	})

	// 获取千帆模型列表
	function getPianfanModals() {
		ApiGet('/Chat/getqianfanchatmodels').then(res => {
			let obj = res.data;
			let list = [];
			for(let key in obj) {
				list.push({
					label: key,
					labelName: '千帆-'+key,
					value: 'QianFan_'+key,
					modelurl: obj[key]
				})
			}
			_d.qianfanList = list;
		})
	}

	// 获取当前选中项
	function getChoice() {
		let res = null;
		outfor:for(let i = 0; i < list.value.length; i++) {
			let aItem = list.value[i];
			if(aItem.value == userStore.modelType) {
				res = aItem;
				break outfor;
			}
			if(aItem.children) {
				for(let j = 0; j < aItem.children.length; j++) {
					let bItem = aItem.children[j];
					if(bItem.value == userStore.modelType) {
						res = bItem;
						break outfor;
					}
				}
			}
		}
		return res;
	}

	// 设置模型类型
	function setModelType(item) {
		if(item.click) {
			item.click();
			return;
		}

		if(!item.notType) {
			userStore.setModelType(item.value);
		}
		let path = item.path || '/home';

		if(route.path != path) {
			if(item.target == '_blank') {
				const href = router.resolve({
				  path: path
				}).href;
				window.open(href, "_blank");
			} else {
				router.push({
					path: path
				})
			}
		}
	}

	defineExpose({
		choice: getChoice
	})

</script>

<style lang="less">
.m-model-select-popover {
	.ant-popover-inner-content {
		padding: 10px 0;
	}
	.modal-select {
		width: 350px;
		min-height: 100px;
		.item {
			padding: 4px 15px;
			&.cursor {
				cursor: pointer;
				&:hover {
					background: #e1e1e1;
				}
			}
			.t1 {
				font-size: 16px;
				color: #000;
			}
			.t2 {
				font-size: 12px;
				color: #aaa;
			}
			.text-box {
				flex: 1;
				width: 0;
				padding: 0 10px;
			}
			.state {
				cursor: pointer;
			}
			.children {
				margin-top: 3px;
				margin-left: 30px;
				padding: 0 5px;
				border-left: 1px solid #5757E3;
				&:after {
					content: '';
					display: block;
					clear: both;
				}
				.c-item {
					float: left;
					white-space: nowrap;
					display: flex;
					align-items: center;
					font-size:12px;
					margin-right: 10px;
					&.cursor {
						cursor: pointer;
						&:hover {
							background: #e1e1e1;
						}
					}
					.state {
						margin-left: 4px;
						width: 14px;
						height: 14px;
					}
				}
			}
		}
	}
}
.m-model-select-btn {
	font-size: 30px;
	background: #eaeaea;
	color: #000;
	padding: 0 36px 0 10px;
	font-size: 16px;
	height: 34px;
	line-height: 34px;
	border-radius: 6px;
	cursor: pointer;
	.icon {
		position: absolute;
		right: 10px;
		top: 50%;
		margin-top:-8px;
		font-size: 16px;
	}
}
</style>